<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="150" height="150"></canvas>
  <script>
    // const canvas = document.getElementById('canvas');
    // const ctx = canvas.getContext('2d');

    // ctx.fillStyle = 'green';
    // ctx.fillRect(10, 10, 150, 100);

    // function draw() {
    //     var canvas = document.getElementById("canvas");
    //     if (canvas.getContext) {
    //         var ctx = canvas.getContext("2d");

    //         ctx.fillStyle = "rgb(200,0,0)";
    //         ctx.fillRect(10, 10, 55, 50);

    //         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    //         ctx.fillRect(30, 30, 55, 50);
    //     }
    // }

    // function draw() {
    //     var canvas = document.getElementById('canvas');
    //     if (canvas.getContext) {
    //         var ctx = canvas.getContext('2d');

    //         ctx.fillRect(25, 25, 100, 100);
    //         ctx.clearRect(45, 45, 60, 60);
    //         ctx.strokeRect(50, 50, 50, 50);
    //     }
    // }
    // draw();

    // function fn(a) {
    //   console.log(a);

    //   var a = 666;

    //   console.log(a);

    //   function a() { }

    //   console.log(a);

    //   var b = function () { };

    //   console.log(b);

    //   function c() { }
    // }

    // fn(1);
    // 宏任务(同步任务) --> 微任务 --> 宏任务(异步任务)
    // 微任务称为jobs，宏任务称为task
    // 宏任务

    // 同步任务
    console.log('script start');
    // 异步任务
    setTimeout(function () {
      console.log('setTimeout');
    }, 0);
    // 微任务
    Promise.resolve().then(function () {
      console.log('promise1');
    }).then(function () {
      console.log('promise2');
    });
    // 同步任务
    console.log('script end');
    const obj = {
      username: 'zhangsan'
    }
    obj.username = 'lisi'
    console.log(obj.username);
    obj.age = 18
    console.log(obj);
  </script>
</body>

</html>